import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Modal, InputNumber } from 'antd';

import { FormComponentProps } from '@ant-design/compatible/es/form';
import React from 'react';

const FormItem = Form.Item;

// 初始化 props
// 初始化 提交表单字段
interface CreateFormProps extends FormComponentProps {
    passWordVisible: boolean;
    passwordValue: any;
    onSubmit: (fieldsValue: {
        newPassword: string,
        confirmPassword: string,
        id: number,
    }) => void;
    onCancel: () => void;
}

const CreateForm: React.FC<CreateFormProps> = props => {
    const { passWordVisible, form, onSubmit: handleSubmitDataForm, onCancel, passwordValue } = props;
    const okHandle = () => {
        form.validateFields((err, fieldsValue) => {
            if (err) return;
            // form.resetFields();
            fieldsValue.id = passwordValue.id;
            handleSubmitDataForm(fieldsValue);
        });
    };
    return (
        <Modal
            destroyOnClose
            title="重置管理员密码"
            visible={passWordVisible}
            onOk={okHandle}
            onCancel={() => onCancel()}
        >
            <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="新密码">
                {form.getFieldDecorator('newPassword', {
                    rules: [{ required: true, message: '请输入至少6个字符！！', min: 6 }],
                })(<Input placeholder="请输入新密码" />)}
            </FormItem>
            <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="确认密码">
                {form.getFieldDecorator('confirmPassword', {
                    rules: [{ required: true, message: '请输入至少6个字符！', min: 6 }],
                })(<Input placeholder="请确认密码" />)}
            </FormItem>
        </Modal>
    );
};

export default Form.create<CreateFormProps>()(CreateForm);
